import React, { useMemo } from "react";
import { CustomerCreditItemProps } from "./interface";
import {
  CountUpWrap,
  CustomerCreditItemWrap,
  ItemNameLineWrap,
  ItemNameStyle,
  ItemUnitNameStyle,
  LeftItem,
  PercentItem,
} from "./styles";
import PercentLine from "../percentLine";
import CountUp from "react-countup";
import { getPrimaryColor } from "../transactionAmountRankItem/getPrimaryColor";

export const CustomerCreditItem = ({
  unitName = "",
  name = "",
  amount = 0,
  percent = 0,
  index = 1,
  itemHeight = 32,
}: CustomerCreditItemProps) => {
  const strokeColor = useMemo(() => {
    if (index == 1) {
      return {
        from: "#E3A64F",
        to: "#F9D7A6",
      };
    }
    if (index == 2) {
      return {
        from: "#C1C1C1",
        to: "#ECECEC",
      };
    }
    if (index == 3) {
      return {
        from: "#A79486",
        to: "#D0BDAF",
      };
    }
    return {
      from: "#3B5EEF",
      to: "#76ACF6",
    };
  }, [index]);

  const primaryColor = getPrimaryColor(index);

  return (
    <CustomerCreditItemWrap itemHeight={itemHeight}>
      <LeftItem>
        <ItemNameLineWrap>
          <ItemNameStyle>{name}</ItemNameStyle>
          <CountUpWrap primaryColor={primaryColor}>
            <CountUp start={0} end={amount} decimals={0} />
            <ItemUnitNameStyle primaryColor={primaryColor}>
              {unitName}
            </ItemUnitNameStyle>
          </CountUpWrap>
        </ItemNameLineWrap>
        <PercentLine
          percent={percent}
          strokeColor={strokeColor}
          backgroundColor="rgba(137, 157, 191, 0.3)"
        />
      </LeftItem>
      <PercentItem>{percent}%</PercentItem>
    </CustomerCreditItemWrap>
  );
};
